<!--
 * @Description: 
 * @Author: linjz
 * @Date: 2021-06-25 10:25:00
 * @LastEditors: linjz
 * @LastEditTime: 2021-07-03 10:55:37
-->
<template>
  <!-- 基础配置页面 -->
  <div>
    <!-- 新增按钮 -->
    <div class="btn">
      <span>字体大小</span>
      <el-button
        size="mini"
        @click="toSetSizeMini"
        style="
          background-color: transparent;
          border: 1px solid #fff;
          box-shadow: 0 0 10px #fff;
        "
        >默认大小</el-button
      >
      <el-button
        size="small"
        @click="toSetSizeSmall"
        style="
          background-color: transparent;
          border: 1px solid #fff;
          box-shadow: 0 0 10px #fff;
        "
        >Small</el-button
      >
      <el-button
        size="medium"
        @click="toSetSizeMedium"
        style="
          background-color: transparent;
          border: 1px solid #fff;
          box-shadow: 0 0 10px #fff;
        "
        >Medium</el-button
      >
    </div>
    <el-button type="primary" @click="toAdd">新增</el-button>

    <!-- 表格区域 -->
    <div>
      <!-- {{ tableData }} -->
      <el-table :data="tableData">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column label="值" align="center" width="120px">
          <template slot-scope="scope">
            <el-image
              v-if="
                scope.row.val ? scope.row.val.indexOf('http://') != -1 : false
              "
              :src="scope.row.val"
            />
            <span v-else class="text">{{
              scope.row.val ? scope.row.val : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="introduce" label="介绍" align="center" />
        <el-table-column prop="address" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="toEdit(scope.row)">编辑</el-button>
            <el-button
              type="text"
              class="style_color"
              @click="toDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/编辑模态框 -->
    <div>
      <el-dialog
        :title="title"
        :visible.sync="visible"
        width="40%"
        @close="toClose"
      >
        <!-- {{ form }} -->
        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="介绍" prop="introduce">
            <el-input v-model="form.introduce"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="type" @change="typeChange">
              <el-option label="文字" value="文字"></el-option>
              <el-option label="图片" value="图片"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值">
            <el-upload
              v-if="type === '图片'"
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
            <el-input v-else v-model="form.val"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSave">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 删除模态框 -->
    <div>
      <el-dialog title="提示" :visible.sync="delVisible" width="20%">
        <span>此操作将永久删除该数据, 是否继续??</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="delSave">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { findAll, saveOrUpdate, deleteById } from "@/api/baseConfig";
import { uploadFileURL, showFileURL } from "../../../utils/config";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      // 表格数据
      tableData: {},
      // 模态框标题
      title: "",
      // 显示新增/编辑模态框
      visible: false,
      // 显示删除模态框
      delVisible: false,
      // 删除信息的id
      delId: "",
      // 模态框数据
      form: {},
      type: "",
      uploadFileURL,
      showFileURL,
      imageUrl: "",
      // 表单校验
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        introduce: [
          { required: true, message: "请输入介绍信息", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    // 获取表格数据
    async queryTableData() {
      let res = await findAll();
      // console.log(res);
      this.tableData = res.data;
    },
    // 新增按钮点击处理事件
    toAdd() {
      this.form = {};
      this.type = "文字";
      this.visible = true;
    },
    // 类型发生改变时
    typeChange() {
      // delete this.form.val;
      this.form.val = "";
    },
    // 新增/编辑模态框的确定按钮点击处理事件
    toSave() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await saveOrUpdate(this.form);
          // console.log(res);
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: res.message,
              type: "success",
            });
          }
          this.visible = false;
          this.queryTableData();
        } else {
          return false;
        }
      });
    },
    // 编辑按钮点击处理事件
    toEdit(row) {
      if (row.val.indexOf("http://") != -1) {
        this.type = "图片";
        this.imageUrl = row.val;
      } else this.type = "文字";
      this.form = { ...row };
      this.visible = true;
    },
    // 删除按钮点击处理事件
    toDelete(id) {
      this.delId = id;
      this.delVisible = true;
    },
    // 删除模态框的确定按钮点击处理事件
    async delSave() {
      let res = await deleteById({ id: this.delId });
      // console.log(res);
      if (res.status == 200) {
        this.$notify({
          title: "成功",
          message: res.message,
          type: "success",
        });
      }
      this.delVisible = false;
      this.queryTableData();
    },
    // 重置表单验证
    toClose() {
      this.$refs.form.resetFields();
    },
    // 图片上传成功后的回调函数
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.val = showFileURL + res.data.id;
    },
    // 图片上传之前的回调函数
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    toSetSizeMini() {
      Cookies.set("size", "mini");
      location.reload();
    },
    toSetSizeSmall() {
      Cookies.set("size", "small");
      location.reload();
    },
    toSetSizeMedium() {
      Cookies.set("size", "medium");
      location.reload();
    },
  },
  created() {
    this.queryTableData();
  },
  mounted() {},
};
</script>
<style scoped>
.text {
  font-size: 14px;
}
.style_color {
  color: #e65d6e;
}
.btn {
  height: 70px;
  margin-bottom: 20px;
  padding-right: 20px;
  text-align: right;
  line-height: 70px;
  background-color: #99cccc;
  border-radius: 5px;
}
.btn span {
  display: inline-block;
  margin-right: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
</style>